<template>
  <view class="detail-container">
    <view class="stock-name">{{ stockData.name }}</view>
    
    <view class="section">
      <view class="section-title">买入记录</view>
      <u-list>
        <u-list-item v-for="(buy, index) in stockData.buys" :key="index">
          <view class="trade-info">
            <text>价格: {{ buy.price }}</text>
            <text>数量: {{ buy.quantity }}</text>
          </view>
        </u-list-item>
      </u-list>
      <u-button @click="navigateToEdit('buy')" type="default" size="small">+ 新增买入记录</u-button>
    </view>

    <view class="section">
      <view class="section-title">卖出记录</view>
      <u-list>
        <u-list-item v-for="(sell, index) in stockData.sells" :key="index">
          <view class="trade-info">
            <text>价格: {{ sell.price }}</text>
            <text>数量: {{ sell.quantity }}</text>
          </view>
        </u-list-item>
      </u-list>
      <u-button @click="navigateToEdit('sell')" type="default" size="small">+ 新增卖出记录</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stockData: {
        name: '',
        buys: [],
        sells: []
      }
    };
  },
  onLoad(options) {
    // 假设从路由参数获取股票ID，然后获取数据
    const stockId = options.id;
    this.loadStockData(stockId);
  },
  methods: {
    loadStockData(id) {
      // 模拟加载数据
      this.stockData = {
        id: id,
        name: '股票A',
        buys: [{ price: '100', quantity: '10' }, { price: '105', quantity: '5' }],
        sells: [{ price: '120', quantity: '15' }]
      };
    },
    navigateToEdit(type) {
      uni.navigateTo({
        url: `/pages/record/edit/index?id=${this.stockData.id}&type=${type}`
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  padding: 20rpx;
}
.stock-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.section {
  margin-bottom: 40rpx;
}
.section-title {
  font-size: 30rpx;
  margin-bottom: 15rpx;
  color: #333;
}
.trade-info {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
</style>